<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 资料库</el-breadcrumb-item>
        <el-breadcrumb-item>文章库管理</el-breadcrumb-item>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="el-col-text">
        <div class="el-col-content">
          <div class="el-col-top">
            <span class="iconfont word">&#xe729;</span>
            <h4>四川农业大学留学生有奖征稿活动</h4>
          </div>
          <div class="el-col-dowm">
            <div class="el-col-bottom">
              <router-link to="/PublishArticle"
                           tag="div">
                编辑
              </router-link>
            </div>
            <div class="el-col-bottom">
              <el-button type="text"
                         @click="dialogVisible = true">属性</el-button>
              <!-- dialog对话框弹出属性信息 -->
              <el-dialog title="属性"
                         :visible.sync="dialogVisible"
                         width="30%"
                         modal=false>
                <!-- 弹出框中的主体内容 -->
                <span>标题：四川农业大学征稿活动<br />
                  位置：文章库管理/首页<br />
                  创建时间：2020年3月3日8:20<br />
                  创建者：王小<br />
                  修改时间：2020年3月5日9:20<br />
                  是否发表：是<br />
                  访问量：190</span>
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="el-col-content">
          <div class="el-col-top">
            <span class="iconfont word">&#xe729;</span>
            <h4>四川农业大学留学生有奖征稿活动</h4>
          </div>
          <div class="el-col-dowm">
            <div class="el-col-bottom">
              <router-link to="/PublishArticle"
                           tag="div">
                编辑
              </router-link>
            </div>
            <div class="el-col-bottom">
              <el-button type="text"
                         @click="dialogVisible = true">属性</el-button>
              <!-- dialog对话框弹出属性信息 -->
              <el-dialog title="属性"
                         :visible.sync="dialogVisible"
                         width="30%"
                         modal:=false>
                <span>标题：四川农业大学征稿活动<br />
                  位置：文章库管理/首页<br />
                  创建时间：2020年3月3日8:20<br />
                  创建者：王小<br />
                  修改时间：2020年3月5日9:20<br />
                  是否发表：是<br />
                  访问量：190</span>
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="el-col-content">
          <div class="el-col-top">
            <span class="iconfont word">&#xe729;</span>
            <h4>四川农业大学留学生有奖征稿活动</h4>
          </div>
          <div class="el-col-dowm">
            <div class="el-col-bottom">
              <router-link to="/PublishArticle"
                           tag="div">
                编辑
              </router-link>
            </div>
            <div class="el-col-bottom">
              <el-button type="text"
                         @click="dialogVisible = true">属性</el-button>
              <!-- dialog对话框弹出属性信息 -->
              <el-dialog title="属性"
                         :visible.sync="dialogVisible"
                         width="30%"
                         modal:=false>
                <span>标题：四川农业大学征稿活动<br />
                  位置：文章库管理/首页<br />
                  创建时间：2020年3月3日8:20<br />
                  创建者：王小<br />
                  修改时间：2020年3月5日9:20<br />
                  是否发表：是<br />
                  访问量：190</span>
              </el-dialog>
            </div>
          </div>
        </div>
        <div class="el-col-content">
          <div class="el-col-top">
            <span class="iconfont word">&#xe729;</span>
            <h4>四川农业大学留学生有奖征稿活动</h4>
          </div>
          <div class="el-col-dowm">
            <div class="el-col-bottom">
              <router-link to="/PublishArticle"
                           tag="div">
                编辑
              </router-link>
            </div>
            <div class="el-col-bottom">
              <el-button type="text"
                         @click="dialogVisible = true">属性</el-button>
              <!-- dialog对话框弹出属性信息 -->
              <el-dialog title="属性"
                         :visible.sync="dialogVisible"
                         width="30%"
                         modal:=false>
                <span>标题：四川农业大学征稿活动<br />
                  位置：文章库管理/首页<br />
                  创建时间：2020年3月3日8:20<br />
                  创建者：王小<br />
                  修改时间：2020年3月5日9:20<br />
                  是否发表：是<br />
                  访问量：190</span>
              </el-dialog>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination background
                       prev-text="prev"
                       next-text="next"
                       layout="prev, pager, next"
                       :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetails',
  data () {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
}
</script>

<style scoped>
.el-col-content {
  width: 29%;
  display: inline-block;
  margin: 20px;
}
.iconfont {
  font-size: 50px;
  display: block;
  width: 60px;
  float: left;
  color: rgb(255, 209, 109);
}
.el-col-text {
  width: 95%;
  padding-bottom: 20px;
  margin-left: 3%;
}
.el-col-top {
  width: 100%;
  height: 100px;
  padding: 20px;
  border: 1px solid #ccc;
}
.el-col-dowm {
  width: 100%;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 40px;
}
.el-col-bottom {
  width: 50%;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ccc;
  transition: all 0.3s linear;
}
.el-col-bottom:hover {
  background-color: #f8f8f8;
  color: #409eff;
}
.container {
  padding: 0;
  overflow: hidden;
}
.el-col-top h4 {
  padding-top: 5px;
  width: 90%;
  color: rgb(97, 95, 95);
}
.pagination {
  width: 96.5%;
  height: 80px;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
// 去掉scoped修改组件样式
<style>
.el-message-box {
  width: 200px;
}
.el-message-box--center {
  padding-bottom: 0;
}
.el-button--text {
  color: black;
  width: 100%;
  font-size: 14px;
}
.el-dialog__header {
  border-bottom: 1px dashed;
  margin-right: 10px;
  margin-left: 20px;
}
.el-dialog {
  text-align: left;
}
</style>